<!--
 *  
 *   -14 14:56:44
 *   -13 13:18:34
 *   
 *    
 *   \dami\src\pages\index\banner.vue
-->

<template>
  <div>
    <Menu mode="horizontal" theme="light">
      <Row>
        <Col class="menu-button" flex="200px">
          <Dropdown theme="dark" class="index-drop">
            <a class="droplink" href="javascript:void(0)"> 全部商品分类 </a>
            <DropdownMenu class="banner-dropmenu" slot="list">
              <Dropdown
                class="fir-menu"
                v-for="item in menudata"
                :key="item.id"
                placement="right-start"
              >
                <DropdownItem>
                  {{ item.itemType }}
                  <Icon type="ios-arrow-forward"></Icon>
                </DropdownItem>
                <DropdownMenu slot="list">
                  <DropdownItem
                    class="sec-menu"
                    v-for="child of item.children"
                    :key="child.itemId"
                    >{{ child.itemType }}</DropdownItem
                  >
                </DropdownMenu>
              </Dropdown>
            </DropdownMenu>
          </Dropdown>
        </Col>
        <Col flex="auto">
          <MenuItem v-for="item in menudata" :key="item.id" :name="item.id">
            {{ item.itemType }}
          </MenuItem>
        </Col>
      </Row>
      <Carousel class="carousal" loop>
        <CarouselItem v-for="item of bannerData" :key="item.id">
          <!-- <div class="carousal-item">{{ item.itemName }}</div> -->
          <img class="carousal-item" :src="item.imgUrl" alt="" />
        </CarouselItem>
      </Carousel>
    </Menu>
  </div>
</template>
  
  <script>
export default {
  name: "Banner",
  data() {
    return {
      menudata: [
        {
          id: "1",
          itemType: "首页",
          children: [
            {
              id: "1-1",
              itemType: "首页",
              children: [
                {
                  id: "1-1-1",
                  itemType: "首页",
                  children: [
                    {
                      id: "1-1-1-1",
                      itemType: "首页",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: "2",
          itemType: "电影",
          children: [
            {
              id: "2-1",
              itemType: "女装",
              children: [
                {
                  id: "2-1-1",
                  itemType: "女装",
                  children: [
                    {
                      id: "2-1-1-1",
                      itemType: "女装",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: "3",
          itemType: "影院",
          children: [
            {
              id: "3-1",
              itemType: "内衣",
              children: [
                {
                  id: "3-1-1",
                  itemType: "内衣",
                  children: [
                    {
                      id: "3-1-1-1",
                      itemType: "内衣",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: "4",
          itemType: "演出",
          children: [
            {
              id: "4-1",
              itemType: "女鞋",
              children: [
                {
                  id: "4-1-1",
                  itemType: "女鞋",
                  children: [
                    {
                      id: "4-1-1-1",
                      itemType: "女鞋",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],

      bannerData: [
        {
          id: 1,
          itemName: "wwwww",
          imgUrl: require("@/assets/swiper/three.png"),
          // imgUrl: requi,
          // imgUrl: require("../../assets/swiper/one"),
        },
        {
          id: 2,
          itemName: "wwwww",
          imgUrl: require("@/assets/swiper/two.png"),
          // imgUrl: requi,
          // imgUrl: require("../../assets/swiper/one"),
        },
        {
          id: 3,
          itemName: "wwwww",
          imgUrl: require("@/assets/swiper/one1.png"),
          // imgUrl: requi,
          // imgUrl: require("../../assets/swiper/one"),
        },
      ],
    };
  },
  methods: {
    // getmenu: function () {
    //   this.$http
    //     .getRequest({
    //       api: "indexMenu",
    //       data: {},
    //     })
    //     .then((res) => {
    //       //解析对象为字符串，在解析字符串为json  JSON.parse(JSON.stringify(res.data))
    //       this.menudata = res.data;
    //       //  console.log(res.data);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    //   // this.$axios.get('/index/manu').then((res) => {
    //   // this.menudata =JSON.parse(JSON.stringify(res.data.data))
    //   // }).catch((err) => {
    //   // console.log(err)
    //   // });
    // },
    // getBanner: function () {
    //   this.$http
    //     .getRequest({
    //       api: "indexBanner",
    //       data: {},
    //     })
    //     .then((res) => {
    //       this.bannerData = JSON.parse(JSON.stringify(res.banner));
    //       //  console.log(this.bannerData);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
  },
  mounted: function () {
    // this.getmenu();
    // this.getBanner();
  },
};
</script>
  
  <style scoped>
.index-drop {
  display: inline-block;
  width: 200px;
  display: flex;
  justify-content: center;
  background-color: rgb(51, 49, 49);
}
.droplink {
  color: #fff;
  font-size: 18px;
}
.ivu-col .ivu-menu-item {
  font-size: 16px;
}
.fir-menu .ivu-dropdown-item {
  font-size: 16px !important;
  display: flex;
  justify-content: space-between;
}
.banner-carousal:hover {
  cursor: pointer;
}
.carousal-item {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 400px; */
  width: 100%;
  height: 400px;
  margin-top: 10px;
  /* font-size: 50px; */
  /* color: #fff; */
}
</style>